@page "/Tooltip"

@using FluentUI.Demo.Shared.Pages.Tooltip.Examples

<h1>Tooltip</h1>
<p>
    The <code>&lt;FluentTooltip&gt</code> component is used to provide extra information about another element when it is hovered.
</p>
<p>
    <code>&lt;FluentTooltip&gt;</code> wraps the <code>&lt;fluent-tooltip&gt;</code> element, a web component implementation of a tooltip composition leveraging the
    Fluent UI design system.
</p>


<h2 id="tooltipservice">Using Tooltip Service Provider</h2>

In the <b>Program.cs</b>, inject the Tooltip service with global options.
You can also use the <b>Services.AddFluentUIComponents</b> method to register
all required FluentUI services, including this one.
<CodeSnippet>builder.Services.AddScoped&lt;ITooltipService, TooltipService&gt;();</CodeSnippet>
<br />
At the end of your <b>MainLayout.razor</b> page, include the provider:
<CodeSnippet>&lt;FluentTooltipProvider /&gt;</CodeSnippet>
<br />
With this provider, all tooltip definitions will be generated with these global options
and will be written at the end of the HTML page to support the different z-index levels.
<br />
<p>
    <strong>
        For the <code>&lt;FluentTooltipProvider/&gt;</code> to work properly, it needs interactivity! If you are using "per page" interactivity, make sure to add a <code>@@rendermode</code> to
        either the provider itself of the component the provider is placed in.
    </strong>
</p>
<br />
<b>Example</b>
    <FluentStack>
    <FluentButton Id="btnWithoutService" Appearance=Appearance.Accent>Tooltip without service</FluentButton>
        <FluentTooltip Anchor="btnWithoutService" UseTooltipService="false" Position=TooltipPosition.Start>Example of tooltip</FluentTooltip>
    </FluentStack>
    <br/>
    <FluentStack>
        <FluentButton Id="btnWithService" Appearance=Appearance.Accent>Tooltip using TooltipService</FluentButton>
        <FluentTooltip Anchor="btnWithService" Position=TooltipPosition.Start>Example of tooltip</FluentTooltip>
    </FluentStack>
<br />
<br />

<h2 id="example">Examples</h2>

<DemoSection Title="Default" Component="@typeof(TooltipDefault)">
    <Description>Move your mouse over this icon to display a tooltip.</Description>
</DemoSection>

<DemoSection Title="Large tooltip" Component="@typeof(TooltipLongExample)">
    <Description>Move your mouse over this icon to display a very large tooltip.</Description>
</DemoSection>

<DemoSection Title="Different delays" Component="@typeof(TooltipDelay)">
    <Description>Hover one of the buttons to have a tooltip appear on hover at the position mentioned.</Description>
</DemoSection>

<DemoSection Title="Always visible" Component="@typeof(TooltipVisible)" />

<h2 id="documentation">Documentation</h2>

<ApiDocumentation Component="typeof(FluentTooltip)" />
